<!--用户充值-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px" class="tabel-form">
      <div>
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="请输入用户名" clearable
                    min-width="250" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="用户直推" style="margin-right: 40px;">
          <!-- <el-select v-model="queryParams.userDirectPush" style="width: 180px;" @change="change1" clearable>
            <el-option v-for="item in pushUserList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
          <el-input v-model="queryParams.userDirectPush" placeholder="请输入用户直推" clearable
                      style="width: 180px;margin-right:20px;" @input="change1" />
        </el-form-item>
        <el-form-item label="用户伞下" style="margin-right: 65px;">
          <!-- <el-select v-model="queryParams.userUnderUmbrella" style="width: 160px;" @change="change2" clearable>
            <el-option v-for="item in sanxiaList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
           <el-input v-model="queryParams.userUnderUmbrella" placeholder="请输入用户伞下" clearable
                      style="width: 180px;margin-right:20px;" @input="change2" />
        </el-form-item>
        <el-form-item label="用户三代" style="margin-right: 20px;">
          <!-- <el-select v-model="queryParams.user3rdGeneration" style="width: 190px;" @change="change3" clearable>
            <el-option v-for="item in userSandai" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
          <el-input v-model="queryParams.user3rdGeneration" placeholder="请输入用户三代" clearable
            style="width: 180px;margin-right:20px;" @input="change3" />
        </el-form-item>
        <el-form-item label="接收地址" prop="trcAddress">
          <el-input v-model="queryParams.trcAddress" placeholder="请输入接收地址" clearable
                    style="width: 300px;" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="会员层级" prop="storey" style="margin-right: 30px">
          <el-select v-model="queryParams.storey" placeholder="请输入会员层级" style="width: 180px;">
            <el-option v-for="item in storeyList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否首充" style="margin-right: 40px;">
          <el-select v-model="queryParams.isRecharge" clearable style="width: 150px;">
            <el-option v-for="item in isTopupList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="queryParams.state" clearable
                     min-width="150">
            <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额范围" style="margin-right: 20px;">
          <el-input v-model="queryParams.lowerAmount" placeholder="金额范围下限" clearable style="width: 130px;" />
          <span> 到 </span>
          <el-input v-model="queryParams.upperAmount" placeholder="金额范围上限" clearable style="width: 130px;" />
        </el-form-item>
        <el-form-item prop="userName" label="支付时间" style="margin-left: 30px">
          <timeConvert @time-range-selected="timeRange" ref="payTime"></timeConvert>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-row :gutter="12" style="margin-bottom: 20px">
      <el-col :span="12">
        <el-card shadow="hover" style="height: 80px;">
            <span style="font-size: 30px;font-weight: bold;padding-right: 20px;color: #ff1019">银行卡</span>
          <span style="padding-right: 15px;color: #ff1019">已通过：<span style="color: #000">{{dataStateList.bankCardAgree}}</span></span>
          <span style="padding-right: 15px;color: #ff1019">待审核：<span style="color: #000">{{dataStateList.bankCardWait}}</span></span>
          <span style="padding-right: 15px;color: #ff1019">不通过：<span style="color: #000">{{dataStateList.bankCardRefuse}}</span></span>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" style="height: 80px;">
          <span style="font-size: 30px;font-weight: bold;padding-right: 20px;color: #1684fc;">USDT</span>
            <span style="padding-right: 15px;color: #1684fc">已通过：<span style="color: #000">{{dataStateList.usdtAgree}}</span></span>
            <span style="padding-right: 15px;color: #1684fc">待审核：<span style="color: #000">{{dataStateList.usdtWait}}</span></span>
            <span style="padding-right: 15px;color: #1684fc">不通过：<span style="color: #000">{{dataStateList.usdtRefuse}}</span></span>
        </el-card>
      </el-col>
    </el-row>


    <el-table v-loading="loading" :data="RechargeList">

      <el-table-column label="创建时间" align="left" prop="createTime" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          {{$yun.convertTimestamp(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="用户名" align="left" prop="userName" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="用户UID" align="left" prop="userRandomId" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="总代" align="left" prop="agentName" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="会员层级" align="left" prop="storey" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="充值金额" align="center" prop="amount" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span :style="{color:scope.row.amount > 1000 ? '#ff1019':'#000'}">{{$yun.priceFormatter(scope.row.amount)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否首充" align="center" prop="isRecharge" width="140">
        <template slot-scope="scope">
          <span :style="{color:scope.row.isRecharge === '是'? '#ff1019':'#000'}">{{scope.row.isRecharge}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="凭证图片" align="center" prop="img" width="120" :show-overflow-tooltip="true">
        <template slot-scope="scope">
           <span style="vertical-align: middle;margin-right: 8px">
          <oss-image-preview v-if="scope.row.img" :src="scope.row.img" :width="30" :height="30"/>
          </span>
        </template>
      </el-table-column>-->
      <el-table-column label="充值次数" align="left" prop="num" width="120" :show-overflow-tooltip="true"/>
      <el-table-column label="状态" align="center" prop="auditType" width="140">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.recharge_withdraw_status" :value="String(scope.row.auditType)" />
        </template>
      </el-table-column>
      <el-table-column label="同活跃IP数" align="center" prop="ipActiveNumber" width="220" />
      <el-table-column label="同注册IP数" align="center" prop="ipRegisterNumber" width="220" />
      <el-table-column label="IP国家" align="center" prop="country" width="220">
        <template slot-scope="scope">
          {{scope.row.registerIp}}
          <span v-show="scope.row.country">({{ scope.row.country }})</span>
        </template>
      </el-table-column>
      <el-table-column label="支付时间" align="center" prop="paymentTime" width="220">
      <template slot-scope="scope">
        {{$yun.convertTimestamp(scope.row.paymentTime)}}
      </template>
      </el-table-column>

      <el-table-column label="接收地址" align="center" prop="receiveAddress" width="220" />
      <el-table-column label="订单号" align="left" prop="orderNo" width="200" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          CZ{{scope.row.orderNo}}
        </template>
      </el-table-column>
<!--      <el-table-column label="通道" align="center" prop="channelName" width="220" />-->
      <el-table-column label="实际到账金额($)" align="center" prop="realAmount" width="140" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span>{{$yun.priceFormatter(scope.row.realAmount)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="实际回调金额" align="center" prop="" width="220">
        <template slot-scope="">
        
      </template>
      </el-table-column>
      <el-table-column label="充值方式" align="center" prop="paymentMethodStr" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <!-- <dict-tag :options="dict.type.recharge_method" :value="scope.row.paymentMethodStr" /> -->
          {{scope.row.paymentMethodStr}}
        </template>
      </el-table-column>
<!--      <el-table-column label="充值类型" align="center" prop="rechargeType" width="160" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.recharge_type" :value="scope.row.rechargeType" />
        </template>
      </el-table-column>
      <el-table-column label="来源" align="center" prop="source" width="140" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.payment_source" :value="scope.row.source" />
        </template>
      </el-table-column>
      <el-table-column label="充值人姓名" align="center" prop="rechargeName" width="160" />-->
      <el-table-column :label="$t('operate')" align="center" class-name="small-padding fixed-width" width="180"
        fixed="right">
        <template slot-scope="scope">
          <div v-if="scope.row.auditType == 0">
            <el-button size="mini" type="success"  class="mini-btn" plain
              @click="handleAudit(scope.row.id,'pass','实际到账金额')" v-hasPermi="['user:Recharge:edit']">通过
            </el-button>
            <el-button size="mini"  class="mini-btn mini-btn-left" type="danger" plain
              @click="handleAudit(scope.row.id,'reject','拒绝通过填写备注')" v-hasPermi="['user:Recharge:remove']">拒绝
            </el-button>
          </div>
          <span v-else>已审核</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

  </div>
</template>

<script>
import {rechargeList, rechargeState} from "@/api/user/recharge";
import DictSelect from "@/components/DictSelect/index.vue";
import DateRangePicker from "@/components/DateRangePicker/index.vue";
import Template from '@/views/setting/template/index.vue'
import { auditNoPass, auditPass } from '@/api/user/withdrawals'
import {convertTimestamp, convertToZeroUTC} from "@/utils/yun";


export default {
  name: "Recharge",
  components: { Template, DateRangePicker, DictSelect },
  dicts: ['user_type', 'payment_method', 'recharge_withdraw_status','recharge_method'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户充值表格数据
      RechargeList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userType: null,
        storey: null,
        startTime: null,
        endTime: null,
        lowerAmount: null,
        upperAmount: null,
        isRecharge: null,
        pushUser:null,
        teamUser:null,
        threeUser:null,
        conditionType:null,
        userName:null,
      },
      dateRange: [],
      // 表单参数
      form: {},
      storeyList:[{id:1,name:'1层'},{id:2,name:'2层'},{id:3,name:'3层'},{id:4,name:'4层'},{id:5,name:'5层'}],
      // 充值状态
      statusList: [{ id: 0, name: '正常' }, { id: 1, name: '冻结' }],
      //是否充值列表
      isTopupList: [{ id: 1, name: '是' }, { id: 2, name: '否' }],
      // 用户伞下
      sanxiaList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      // 用户三代
      userSandai: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],
      //用户直推
      pushUserList: [{ id: 1, name: '真实用户' }, { id: 2, name: '状态正常' }, { id: 3, name: '充值用户' }],

      dataStateList:{},
    };
  },
  created() {
    this.getList();
    this.pageState();
  },
  methods: {
    convertTimestamp,
    /** 查询用户充值列表 */
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      delete obj.teamUser
      delete obj.threeUser
      delete obj.pushUser
      this.removeNullValues(obj)
      rechargeList(obj)
        .then(response => {
          this.RechargeList = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        })
    },
    pageState(){
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      delete obj.teamUser
      delete obj.threeUser
      delete obj.pushUser
      this.removeNullValues(obj)
      rechargeState(obj).then(response => {
          this.dataStateList = response.data;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // if(this.queryParams.pushUser !== null) this.queryParams.conditionType = 1
      // if(this.queryParams.teamUser !== null) this.queryParams.conditionType = 2
      // if(this.queryParams.threeUser !== null) this.queryParams.conditionType = 3
      // if(this.queryParams.conditionType && !this.queryParams.userName) return this.$modal.msgError('请输入账户名')
      this.getList();
      this.pageState();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.$refs['payTime'].clear()
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userType: null,
        storey: null,
        startTime: null,
        endTime: null,
        lowerAmount: null,
        upperAmount: null,
        isRecharge: null,
        conditionType:null,
        pushUser:null,
        teamUser:null,
        threeUser:null,
        userName:null,
      }
      this.getList();
      this.pageState();
    },
    async handleAudit(id,type,tips) {
      const h = this.$createElement;
      this.$prompt( h('p', null, [h('i', { style: 'color: red' }, '* '),
          h('span', null,  type == 'pass' ? '实际到账金额' : '备注')]),
        tips,{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern:/^.+$/,
          inputErrorMessage:'请输入内容'
        }).then(async({ value }) => {
        let data = {id: id}
        if(type == 'pass') {
          data.actualArrivalAmount = value
          await auditPass(data).then(res => {this.$modal.msgSuccess(this.$t('audit-success'));})
        }else{
          data.auditDesc = value
          await auditNoPass(data).then(res => {this.$modal.msgSuccess(this.$t('audit-success'));})
        }
        this.getList()
          // let data = type == 'pass' ? {'amount':value,type:1} : {'remark':value,type:2};
          // await rechargeAudit(id, data)
          // this.$modal.msgSuccess(this.$t('audit-success'));
          // this.getList()
      }).catch(() => {

      })
    },
    change1(e) {
      this.queryParams.userDirectPush = e
    },
    change2(e) {
      this.queryParams.userUnderUmbrella = e
    },
    change3(e) {
      this.queryParams.user3rdGeneration = e
    },
    removeNullValues(obj) {
      for (let key in obj) {
        if (obj[key] === null) {
          delete obj[key];
        }
      }
    },
    // 获取组件时间
    timeRange(obj){
      this.queryParams.startTime = obj.startTime;
      this.queryParams.endTime = obj.endTime;
    },
  },
  watch: {
    dateRange(value) {
      this.queryParams.startDate = value[0]
      this.queryParams.endDate = value[1]
    }
  }
};
</script>
